<template>
  <div>
    <el-button type="text" @click="handleClick">{{
      dialogTableData.buttonContext
    }}</el-button>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      append-to-body
      width="80%"
      :modal="false"
    >
      <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
          <!-- 搜索 -->
          <el-input
            v-model="query.value"
            clearable
            placeholder="输入搜索内容"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="toQuery"
          />

          <el-select
            v-model="query.type"
            clearable
            placeholder="类型"
            class="filter-item"
            style="width: 130px"
          >
            <el-option
              v-for="item in queryTypeOptions"
              :key="item.key"
              :label="item.display_name"
              :value="item.key"
            />
          </el-select>

          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="toQuery"
            >搜索</el-button
          >
          <!-- 新增 -->
        </div>
        <!--表单组件-->

        <!--表格渲染-->
        <el-table
          v-loading="loading"
          :data="data"
          size="small"
          style="width: 100%;"
        >
          <template v-for="(item, index) in elTtableColumns" v-if="!item.isImg">
            <el-table-column :prop="item.columnProp" :label="item.columnLabel">
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column
              :prop="item.columnProp"
              :label="item.columnLabel"
              ref="table"
            >
              <template slot-scope="scope">
                <a
                  :href="item.scopeRowVatar"
                  style="color: #42b983"
                  target="_blank"
                  ><img
                    :src="item.scopeRowVatar"
                    alt="点击打开"
                    class="el-avatar"
                /></a>
              </template>
            </el-table-column>
          </template>

          <el-table-column
            label="操作"
            width="185"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="doSelect(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
          :total="total"
          :current-page="page + 1"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import checkPermission from "@/utils/permission";
import initData from "@/mixins/crud";
export default {
  mixins: [initData],
  props: {
    dialogTableData: {
      dialogVisible: Boolean,
      title: String,
      url: String,
      sort: String,
      buttonContext: String,
      elTtableColumns: {
        type: Array,
        default: () => []
      },
      queryTypeOptions: {
        type: Array,
        default: () => []
      }
    }
  },
  data() {
    return {
      dialogVisible: this.dialogTableData.dialogVisible,
      title: this.dialogTableData.title,
      buttonContext: this.dialogTableData.buttonContext,
      elTtableColumns: this.dialogTableData.elTtableColumns,
      queryTypeOptions: this.dialogTableData.queryTypeOptions
    };
  },
  created() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    checkPermission,
    beforeInit() {
      this.url = this.dialogTableData.url;
      const sort = this.dialogTableData.sort;
      this.params = {
        page: this.page,
        size: this.size,
        sort: sort,
        isShow: 1,
        isDel: 0,
        isIntegral: 0
      };
      const query = this.query;
      const type = query.type;
      const value = query.value;
      if (type && value) {
        this.params[type] = value;
      }
      return true;
    },
    doSelect(data) {
      this.dialogVisible = false;
      this.$emit("select-callback", data);
    },
    handleClick() {
      this.dialogVisible = true;
    }
  }
};
</script>
<style scoped></style>
